export function 添加涟漪(e) {
    const 涟漪=e.target
    console.log("你点了我");
    const 涟漪容器 = document.createElement('div');
    涟漪容器.className = '涟漪容器';
    const computedStyle = window.getComputedStyle(涟漪);
    涟漪容器.style.borderRadius = computedStyle.borderRadius;
    涟漪容器.style.transform = computedStyle.transform;
    涟漪容器.style.top = 涟漪.offsetTop + 'px';
    涟漪容器.style.left = 涟漪.offsetLeft + 'px';
    涟漪容器.style.width = 涟漪.offsetWidth + 'px';
    涟漪容器.style.height = 涟漪.offsetHeight + 'px';
    涟漪.insertAdjacentElement('afterend', 涟漪容器);
  
    // 创建span元素，并设置其位置为鼠标点击的位置
    let span = document.createElement("span");
    span.style.left = e.offsetX + "px";
    span.style.top = e.offsetY + "px";
    // 将span元素添加至按钮标签里
    涟漪容器.appendChild(span);
    // 1秒后删除span元素
    setTimeout(() => {
      涟漪容器.remove();
    }, 1000);
  }

export  function 获取所有涟漪类元素添加监听() {
    // 获取所有按钮
    const 涟漪s = document.querySelectorAll(".涟漪");
    // 循环所有按钮，并为每一个按钮添加点击事件
    涟漪s.forEach(涟漪 => {
      涟漪.addEventListener("click", e => {
        添加涟漪(e)
      })
    })
  }